<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .d1 {
            width: 1200px;
            height: 800px;
            background-color: aqua;
            display: block;
        }

        .d2 {
            width: 1200px;
            height: 800px;
            background-color: aqua;
            display: none;
        }

        ul {
            background-color: white;
        }
        .shom{
            background-color: red;
            color:white
        }
        li {
            list-style: none;
            display: inline-block;
            color: red;
            padding: 10px 113px;
        }

        .b div {
            width: 190px;
            height: 290px;
            background-color: bisque;
            display: inline-block;
            margin: 10px;

            img {
                width: 190px;
            }

            p {
                font-size: 12px;
            }
        }

        .c div {
            width: 190px;
            height: 305px;
            background-color: bisque;
            display: inline-block;
            margin: 10px;
            padding: 5px;

            img {
                width: 190px;
            }

            p {
                font-size: 12px;
            }
        }
    </style>
</head>

<body>
    <button onclick="gwc()">购物车</button><button onclick="sy()">首页</button>
    <div class="d1">
        <ul>
            <li class="a shom">空调</li>
            <li class="a">平板电视</li>
            <li class="a">生活电器</li>
            <li class="a">洗衣机</li>
        </ul>
        <div>
            <div class="b">

            </div>
        </div>
    </div>
    <div class="d2">
        <button onclick="qx()">全选</button>
        <button onclick="fx()">反选</button>
        <button onclick="scxz()">删除选中</button>
        <div class="c">

        </div>
        <h1>总价<span class="zong">0</span></h1>
    </div>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var data = [{
            id: 0,
            pid: 0,
            name: '大2匹冷暖壁挂机用于危化品仓库调漆室实验室储能蓄电等工业防爆',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/249640/14/22779/90595/67282c29Fcfc91a0f/72ab29e8fd70bf44.jpg',
            jia: 9000,
            num: 1,
            is: false
        }, {
            id: 1,
            pid: 0,
            name: ' 壁挂式挂机 KFR-35GW/N8KS1-1 家电国家补贴',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/267573/3/29157/113360/67c9a540F6ad15af7/d689eee78897dd84.jpg',
            jia: 2000,
            num: 1,
            is:false
        }, {
            id: 2,
            pid: 1,
            name: 'HUAWEI',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/262214/2/22301/58547/67b6fb87F8964c60b/6215cce7909c1267.jpg.avif',
            jia: 2000,
            num: 1,
            is: false
        }, {
            id: 3,
            pid: 1,
            name: '荣耀',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/227339/5/37449/94541/67a48557F27a3f66d/bd0bcc4c733a34ea.jpg.avif',
            jia: 1500,
            num: 1,
            is: false
        }, {
            id: 4,
            pid: 2,
            name: '水壶',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/255715/2/25179/85101/67bc21a3F53d5aae2/9079ca3ef3d5a3dc.jpg.avif',
            jia: 69,
            num: 1,
            is:false
        },
        {
            id: 5,
            pid: 2,
            name: '熨斗',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/265977/2/29521/66579/67ca6f76F6abe3ee4/ebf8c2d790b23019.jpg.avif',
            jia: 19,
            num: 1,
            is: false
        }, {
            id: 6,
            pid: 3,
            name: '小天鹅',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/263612/11/25859/205399/67c16601F37eb3e98/e4b99ec02941b8b7.jpg.avif',
            jia: 699,
            num: 1,
            is: false
        },
        {
            id: 7,
            pid: 3,
            name: '小型洗衣机',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/268482/36/27666/126385/67c6644fFeade69c2/e2bbbec1020f66d6.jpg.avif',
            jia: 546,
            num: 1,
            is: false
        },
        ]
        var zong = 0
        var arr = []
        // 渲染主页
        function xr(){
            data.forEach(item => {
            if (item.pid == 0) {
                $('.b').append(`<div>
                  <img src=${item.img} alt="">
                  <p>${item.name}</p>
                  <span>￥${item.jia}</span>
                  <button onclick="jr(${item.id})">加入购物车</butotn>
              </div>`)
            }
        })
        }
        xr()
        var a = document.querySelectorAll('.a')
        a.forEach((item, index) => {
            item.addEventListener('click', () => {
                var a = data.filter(item => item.pid == index)
                $('.b').html('')
                a.forEach(item2 => {
                    $('.b').append(`<div>
                  <img src=${item2.img} alt="">
                  <p>${item2.name}</p>
                  <span>￥${item2.jia}</span>
                  <button onclick="jr(${item2.id})">加入购物车</butotn>
              </div>`)
                })
            })
        })
        
        // 加入购物车
        function jr(id) {
            var a = data.find(item => item.id == id)
            var b = arr.includes(a)
            if (b == false) {
                arr.push(a)
            }
        }
        // 渲染购物车
        function gwc() {
            $('.d1').css('display', 'none')
            $('.d2').css('display', 'block')
            $('.c').html('')
            arr.forEach(item => {
                $('.c').append(`
        <div><input type="checkbox" ${item.is ? 'checked' :''} onclick="jgjs(${item.id},${item.is})" >
                <img src=${item.img} alt="">
                <p>${item.name}</p>
                <span>￥${item.jia}</span>
                <button onclick="jian(${item.id})">-</button>${item.num}<button onclick="jia(${item.id})">+</button>
                <button onclick="scdg(${item.id})">删除</button>
                </div>`)
            })
        }
        // 计算
        function jgjs(id, is) {
            var a = data.find(item => item.id == id)
            a.is = event.target.checked
            if (a.is == true) {
                zong += a.jia * a.num
            } else if (a.is == false) {
                zong -= a.jia * a.num
            }
            $('.zong').html('')
            $('.zong').append(zong)
        }
        // 数量加
        function jia(id, is) {
            var a = data.find(item => item.id == id)
            if (a.is == true) {
                zong += a.jia
            }
            a.num++
            $('.zong').html('')
            $('.zong').append(zong)
            gwc()
        }
        // 数量减
        function jian(id) {
            var a = data.find(item => item.id == id)
            if (a.num >= 2) {
                a.num--
                if (a.is == true) {
                    zong -= a.jia
                }
            }
            gwc()
            $('.zong').html('')
            $('.zong').append(zong)
        }
        // 全选
        function qx(){
            arr.forEach(item => {
                if(item.is == false){
                    item.is = true
                }else if(item.is == true){
                    item.is = false
                }
            })
            var a = arr.filter(item => item.is == true)
            a.forEach(item => {
                    zong += item.jia * item.num
            })
            var b = arr.filter(item => item.is == false)
            b.forEach(item => {
                    zong -= item.jia * item.num
            })
            $('.zong').html('')
            $('.zong').append(zong)
            gwc()
        }
        // 反选
        function fx(){
            arr.forEach(item => item.is = !item.is)
            var a = arr.filter(item => item.is == true)
            a.forEach(item => {
                    zong += item.jia * item.num
            })
            var b = arr.filter(item => item.is == false)
            b.forEach(item => {
                    zong -= item.jia * item.num
            })
            $('.zong').html('')
            $('.zong').append(zong)
            gwc()
        }
        // 删除选中
        function scxz(){
            var a = arr.filter(item => item.is == true)
            a.forEach(item => {
                arr.splice()
                console.log(arr);
                
            })
            
        }
        // 删除单个
        function scdg(id){
            var a = arr.findIndex(item => item.id == id)
            arr.splice(a,1)
            gwc()
        }
        // tab栏切换样式
        var lia = document.querySelectorAll('.a')
        lia.forEach((item) => {
    item.addEventListener('click', () => {
        lia.forEach((item2) => {
            if (item2 !== item) {
                item2.classList.remove('shom');
            }
        });
        item.classList.toggle('shom');
    });
});
function sy(){
    $('.d1').css('display', 'block')
    $('.d2').css('display', 'none')
}
    </script>
</body>

</html>